<template>
  <n-card :bordered="false" title="基础文档" class="card-header-border">
    <div v-mark v-html="mark" class="marked-contents" :style="{height:height+'px'}"></div>
  </n-card>
</template>

<script lang="ts" setup>
import { marked }from 'marked';
import {useWindowResize} from '@/hooks/useWindowReSize.ts';
const mark=marked('# Naive Admin\n' +
    '#### 一套Java语言开发的中后台\n' +
    '目前实现RBAC权限功能\n' +
    '### 技术特点\n' +
    '* 统一RestfulApi标准封装返回模型\n' +
    '* 统一RestfulApi标准封异常返回模型\n' +
    '* 前端封装了数据列表\n' +
    '* 重新封装了Axios\n' +
    '### 技术栈\n' +
    '* SpringBoot(3.2.2)\n' +
    '* SpringSecurity\n' +
    '* mysql\n' +
    '* mybatis-flex\n' +
    '* redis\n' +
    '* jwt\n' +
    '* fastjson2\n' +
    '### 技术栈（前端）\n' +
    'Vue3、TypeScript、Pinia、Vite、NaiveUi\n' +
    '### 内置功能模块\n' +
    '* 管理员管理\n' +
    '* 角色管理\n' +
    '* 菜单管理\n' +
    '### 权限\n' +
    '* 后端权限验证使用了SpringBoot的PreAuthorize注解\n' +
    '```\n'+
    'PreAuthorize("hasAuthority(\'xxx:xxx\')") 如:@PreAuthorize("hasAuthority(\'admin:del\')")\n'+
    '```\n'+
    '* 前端使用了自定义指令：v-permission 和 permission\n' +
    '* 自定义指令写法如下:\n' +
    '```\n' +
    '#页面中\n'+
    'v-permission="{action:\'xxxx\',effect:\'disabled\'}" #按钮会显示，但会赋disabled属性。无法点击\n' +
    'v-permission="[\'xxx:xxx\']" #按钮不会显示\n' +
    'v-permission="\'xxx:xxx\'" #按钮不会显示\n' +
    'v-permission="{action:\'xxx:xxx\'}" #按钮不会显示\n' +
    '#按钮中的写法示例\n' +
    '<n-button type="success" v-permission="[\'role:add\']">新增</n-button> #建议的写法\n' +
    '#数据列表中操作列\n' +
    'permission="{action:\'xxxx\',effect:\'disabled\'}" #按钮会显示，但会赋disabled属性。无法点击\n' +
    'permission="[\'xxx:xxx\']" #按钮不会显示\n' +
    'permission="\'xxx:xxx\'" #按钮不会显示\n' +
    'permission="{action:\'xxx:xxx\'}" #按钮不会显示\n' +
    '#数据表中的示例' +
    '{\n' +
    '  width: 180,\n' +
    '  title: "操作",\n' +
    '  key: "action",\n' +
    '  fixed: "right",\n' +
    '  render(record: Recordable) {\n' +
    '    return h(DataTableAction, {\n' +
    '      actions: [\n' +
    '        {\n' +
    '          label: \'修改\',\n' +
    '          onClick: handleEdit.bind(null, record),\n' +
    '          type: \'primary\',\n' +
    '          disabled: !!record.isDisabled,\n' +
    '          permission:[\'admin:edit\']\n' +
    '        },\n' +
    '        {\n' +
    '          label: \'删除\',\n' +
    '          type: \'error\',\n' +
    '          popConfirm: NPopconfirm,\n' +
    '          onPositiveClick: handleDelete.bind(null, record),\n' +
    '          confirm: {\n' +
    '            text: \'确定删除当前管理员吗？\',\n' +
    '          },\n' +
    '          disabled: !!record.isDisabled,\n' +
    '          permission:[\'admin:del\']\n' +
    '        },\n' +
    '      ],\n' +
    '      //更多操作写法\n' +
    '      dropDownActions: [\n' +
    '        {\n' +
    '          label: \'启用\',\n' +
    '          key: \'enabled\',\n' +
    '          permission:[\'admin:enabled\']\n' +
    '        },\n' +
    '        {\n' +
    '          label: \'禁用\',\n' +
    '          key: \'disabled\',\n' +
    '          permission:[\'admin:disabled\']\n' +
    '        },\n' +
    '      ],\n' +
    '      select: (key: any) => {\n' +
    '        message.info(`您点击了，${key} 按钮`);\n' +
    '      },\n' +
    '    });\n' +
    '  },\n' +
    '}\n'+
    '```\n')
const {height} = useWindowResize();
console.log(height)
</script>

<style scoped lang="scss">
.marked-contents{
  overflow: auto;
}
</style>